
<script type="text/javascript">

$(function(){
    var pro_id = document.getElementById('pro_id').value;
	$('#swfupload-control').swfupload({
		upload_url: "../action/control_gallery.php?action=insert&id="+pro_id,
		file_post_name: 'image',
		file_size_limit : "1024",
		file_types : "*.jpg;*.png;*.gif",
		file_types_description : "Image files",
		file_upload_limit : 100,
		flash_url : "../js/swfupload.swf",
		button_image_url : '../images/wdp_buttons_upload_114x29.png',
		button_width : 114,
		button_height : 29,
		button_placeholder : $('#button')[0],
		debug: false
	})
		.bind('fileQueued', function(event, file){
			var listitem='<li id="'+file.id+'" >'+
				'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
				'<div class="progressbar" ><div class="progress" ></div></div>'+
				'<p class="status" >Pending</p>'+
				'<span class="cancel" >&nbsp;</span>'+
				'</li>';
			$('#log').append(listitem);
			$('li#'+file.id+' .cancel').bind('click', function(){
				var swfu = $.swfupload.getInstance('#swfupload-control');
				swfu.cancelUpload(file.id);
				$('li#'+file.id).slideUp('fast');
			});
			// start the upload since it's queued
			$(this).swfupload('startUpload');
		})
		.bind('fileQueueError', function(event, file, errorCode, message){
			alert('Size of the file '+file.name+' is greater than limit');
		})
		.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
			$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
		})
		.bind('uploadStart', function(event, file){
			$('#log li#'+file.id).find('p.status').text('Uploading...');
			$('#log li#'+file.id).find('span.progressvalue').text('0%');
			$('#log li#'+file.id).find('span.cancel').hide();
		})
		.bind('uploadProgress', function(event, file, bytesLoaded){
			//Show Progress
			var percentage=Math.round((bytesLoaded/file.size)*100);
			$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
			$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
		})
		.bind('uploadSuccess', function(event, file, serverData){
			var item=$('#log li#'+file.id);
			item.find('div.progress').css('width', '100%');
			item.find('span.progressvalue').text('100%');
			var pathtofile='<a style="text-decoration:none" href="../uploads/gallery/'+file.name+'" target="_blank" >view &raquo;</a>';
			item.addClass('success').find('p.status').html('<img src="../images/done.gif" alt="done" style="margin-top:4px;"/> - '+pathtofile);
		})
		.bind('uploadComplete', function(event, file){
			// upload has completed, try the next one in the queue
			$(this).swfupload('startUpload');
		})

});

</script>


<a href="javascript:javascript:history.go(-1)" class="button_back"></a>
<div class="clear-block" style="margin-top: 10px;">
            <div class="node-form">
                <div class="standard">
                    <h3>&raquo; Add And Upload Image to Gallery</h3>
<input type="hidden" id="pro_id" value="<?php echo $_GET['id']; ?>" />
                    <div id="swfupload-control">
                        <p>Upload multiple image files(jpg, png, gif), each having maximum size of 1MB</p>

                        <input type="button" id="button" />
                        <p id="queuestatus" ></p>
                        <ol id="log"></ol>
                    </div>
                </div>
            </div>
</div>